<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/share/common.css" rel="stylesheet" />
		<style>
		   /*.mui-bar .mui-title{
		   	  margin-top:4px;
		   	  height:35px;
		   	  line-height: 35px;
		      background: #c22c3b;
		   } 		   
		    .mui-bar-nav h1 input{
		    	border:none;
		    	outline: none;
		    	background:url(../../image/shopping/search.png) no-repeat 95% 5px;
		        background-size:25px 25px ;
		    }*/
		    .mui-table-view{
		    	padding: 0px 8px;
		    }
			.mui-control-content.mui-active {
				background: #fff;
			}
			
			.mui-bar-nav a {
				color: #fff;
			}
			.mui-bar .mui-icon-search{
				 margin-top:2px;
		   	     font-size:1.3em;
			}
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
			    border-bottom: 2px solid #fff;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				background-color: #f5f5f5;
				position: relative;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				background-color: #fff;
				color: #4c4c4c;
				background: ;				
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:before{
				content: "";
				position:absolute;
				left:0px;
				width:7px;
				height:100%;
				background: #c22c3b;
			}
			
			.mui-col-xs-9 .mui-control-content .mui-table-view li:after {
				height: 0px;
			}
			
			.mui-col-xs-9 .mui-control-content .mui-table-view li {
				width: 33%;
				float: left;
				text-align: center;
			}
			
			.mui-col-xs-9 .mui-control-content .mui-table-view li img {
				width: 46px;
				height: 46px;
				border: 1px solid #e9e9e9;
				background: url('../../image/placeholder1.png') no-repeat;
				background-size:46px 46px;
			}
			
			.mui-col-xs-9 .mui-control-content .mui-table-view .attention {
				width: 100%;
				text-align: left;								
			}
			.mui-col-xs-9 .mui-control-content .myactive li:last-child{
				border:5px solid #f5f5f5;								
			}
			.mui-col-xs-9 .mui-control-content .mui-table-view .attention i{
				display:inline-block;
				width:26px;
				height:31px;
				background:url(../../image/sy_qz.png) no-repeat top;
				background-size:26px 26px;
				vertical-align: middle;
				margin-right: 7px;
			}
			.mui-col-xs-9 .mui-control-content .mui-table-view .brandlist{
				position: relative;
				width: 100%;
				text-align: center;	
			}
			.mui-col-xs-9 .mui-control-content .mui-table-view .brandlist i:first-child{
				position: absolute;
				top:45%;
				left:0px;
				width: 30%;
				height: 1px;
				background: #dfdfdf;		
			}
			.mui-col-xs-9 .mui-control-content .mui-table-view .brandlist i:last-child{
				position: absolute;
				top:45%;
				right:0px;
				width: 30%;
				height: 1px;
				background: #dfdfdf;		
			}
			.texthidden{
				font-size: 10px;
			}
		</style>
	</head>

	<body id="main">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-icon-search mui-pull-right header-right-text" onclick="OpenNewWin({url:'productSearch.html',id:'productSearch.html'})"></a>
			<h1 class="mui-title" onclick="OpenNewWin({url:'productSearch.html',id:'productSearch.html'})"><input type="text"  disabled="disabled" /></h1>
		</header>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<a class="mui-control-item border mui-active" v-on:click="init(sortRecmment)" >{{sortRecmment.name}}</a>
					<a class="mui-control-item border" v-for="sort in sorts" v-on:click="init(sort)" >{{sort.name}}</a>
				</div>
			</div>
			<div  class="mui-col-xs-9" >
				<div id="content1" class="mui-control-content mui-active">
					<ul class="mui-table-view myactive" v-show="showmy">
						<li class="mui-table-view-cell attention" ><i></i>我的关注</li>
						<li class="mui-table-view-cell" v-for="myattion in myattions"  v-on:click="detail(myattion,1)">
							<img src={{myattion.shopLogo}} />
							<p class="texthidden">{{myattion.shopName}}</p>
						</li>
						<li class="attention" ></li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell brandlist"><i></i>品牌列表<i></i></li>
						<li class="mui-table-view-cell" v-for="recommend in recommends" v-on:click="detail(recommend,2)">
							<img src={{recommend.shopLogo}} />
							<p class="texthidden">{{recommend.shopName}}</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
	    <script src="../../js/vue-resource.min.js"></script>
		<script src="../../js/localData.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../js/request.js"></script>	
		<script src="../../js/common.js"></script>		
		<script src="../../script/shopping/classifySearch.js"></script>
	</body>

</html>